<template>
  <!-- 安防-消防系统 -->
  <div class="fire-alarm chart-box1">
    <div class="chart-title">消防系统</div>
    <div class="chart-content" align="middle">
      <div class="statistics-list datav-scroller-bar" v-if="list.length > 0">
        <div v-for="(item, index) of list" :key="index" class="statistics-item">
          {{ item.label }}：{{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import request from "../../../../common/utils/request";
import store from "../../../../store";

export default defineComponent({
  name: "FireAlarmInfo",
  components: { CountTo },
  setup(props) {
    let keyCount = 1;
    const state = reactive({
      chartKey: `current_peak_${keyCount}`,
      list: [],
    });

    watch(
      () => store.getters.security.FireTotal,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { FireTotal } = store.getters.security;
      if (FireTotal && FireTotal.length) {
        state.list = FireTotal;
      }
    };
    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";

.statistics-list {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  padding: 0 1rem;

  .statistics-item {
    text-align: left;
    margin-top: 1rem;
    color: #fff;

    &:first-child {
      margin-top: 0;
    }
  }
}
</style>
